import { Layout, Button } from 'antd';
import React from 'react';
import RightStyle from './right.module.css'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons';
import Goods from '../../page/goods/Goods';
import GoodsAdd from '../../page/goodsAdd/GoodsAdd'
import Order from '../../page/order/Order';
import User from '../../page/user/User';
import NoFound from '../../page/404/NoFound';
import Index from '../../page/Index/Index';
import Setting from '../../page/setting/Setting';
import { Switch,Route, Redirect } from 'react-router-dom';

const { Header, Content, } = Layout;

export default function HomeRight(props) {
  const changeCollapsed = () => {
    props.setCollapsed(!props.collapsed)
  }
  return (
    <Layout style={{width: '100%'}}>
        <Header
          className="bg-white"
          style={{
            padding: 0
          }}
        >
          {props.collapsed ?  
            <MenuUnfoldOutlined onClick={changeCollapsed} className={`${RightStyle.trigger}`}></MenuUnfoldOutlined> 
            :
            <MenuFoldOutlined  onClick={changeCollapsed} className={`${RightStyle.trigger}`}></MenuFoldOutlined>}
          
          <span className='fs21 fw600 letter1'>小米商城后台管理系统</span>
          <Button className='fr mt20 mr20' danger size="small"  type="primary">退出</Button>
        </Header>
        <Content
          className="bg-white"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          {/* 写入路由 */}
          <Switch>
            <Route exact path={'/goods'} component={Goods}></Route>
            <Route exact path={'/goodsAdd'} component={GoodsAdd}></Route>
            <Route path={'/order'} component={Order}></Route>
            <Route path={'/user'} component={User}></Route>
            <Route path={'/index'} component={Index}></Route>
            <Route path={'/setting'} component={Setting}></Route>
            <Route exact path="/" render={()=> <Redirect to="/login"></Redirect>}></Route>
            <Route component={NoFound}></Route>
          </Switch>
        </Content>
    </Layout>
  )
}
